<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType" id="J_navbar">
    <div class="site-navbar__header">
      <!-- 点击跳转到 home -->
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:;">{{ $t('system.name') }}</a>
        <a class="site-navbar__brand-mini" href="javascript:;">{{ $t('system.nameSort') }}</a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix" id="J_navbar_body">
      <!-- 导航菜单， mode:垂直模式和水平模式 -->
      <el-menu
        class="site-navbar__menu"
        mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>
      </el-menu>
      <!-- ===================================================== -->
      <!-- 导航一级菜单栏 -->
      <TopMenu class="site-navbar__menu" />
      <!-- =================================================== -->
      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal">
        <!-- 跳转网站 -->
        <!-- <el-menu-item index="2">
          <el-badge value="cold">
            <a href="//www.renren.io/" target="_blank">官方社区</a>
          </el-badge>
        </el-menu-item> -->
        <!-- 全屏 -->
        <el-menu-item index="4" @click="themeSettingOpen = !themeSettingOpen">
          <template slot="title">
            <el-badge title="全屏">
              <icon-svg name="jiesuo"></icon-svg>
            </el-badge>
          </template>
        </el-menu-item>
        <!-- 消息 -->
        <el-menu-item index="4" @click="themeSettingOpen = !themeSettingOpen">
          <template slot="title">
            <el-badge title="消息">
              <icon-svg name="tixing"></icon-svg>
            </el-badge>
          </template>
        </el-menu-item>
        <!-- 国际化 -->
       <el-submenu index="3">
          <template slot="title">{{languages[selectedLanguage]}}</template>
            <el-menu-item
                index="2-1"
                v-for="(value, key) in languages"
                :key="key"
                @click="handleLanguage(key)"
                :disabled="key == selectedLanguage"
            >{{value}}</el-menu-item>
        </el-submenu>
        <!-- 个人设置 -->
        <el-menu-item class="site-navbar__avatar" index="5">
          <!-- 展开下拉菜单的延时（仅在 trigger 为 hover 时有效） trigger默认 hover -->
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img :src=" imgUrlHost+avatar" v-on:error.once="moveErrorImg($event)" :alt="nickName">{{ nickName }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('handle.userInfo') }}</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">{{ $t('handle.exit') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </nav>
</template>

<script>
import UpdatePassword from "./main-navbar-update-password";
import { imgUrlHost } from "@/config/env";
import { clearLoginInfo } from "@/utils";
import TopMenu from "./main-navbar-menu";
import Vue from "vue";
import { changeLanguage, currLanguage, __languages } from "@/i18n";
export default {
  data() {
    return {
      imgUrlHost: imgUrlHost,
      updatePassowrdVisible: false,
      headPhoto: require("@/assets/img/avatar.png"),
      selectedLanguage: currLanguage(),
      languages: __languages
    };
  },
  components: {
    UpdatePassword,
    TopMenu
  },
  computed: {
    navbarLayoutType: {
      get() {
        return this.$store.state.common.navbarLayoutType;
      }
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      },
      set(val) {
        this.$store.commit("common/updateSidebarFold", val);
      }
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      }
    },
    userName: {
      get() {
        return this.$store.state.user.name;
      }
    },
    nickName: {
      get() {
        return this.$store.state.user.nickname;
      }
    },
    avatar: {
      get() {
        return this.$store.state.user.avatar;
      }
    }
    /* ,
      themeSettingOpen: {
        get () { return this.$store.state.common.themeSettingOpen },
        set (val) { this.$store.commit('common/updateThemeSettingOpen', val) }
      } */
  },
  methods: {
     // 语言改变
      handleLanguage(val) {
        if (this.selectedLanguage !== val) {
          changeLanguage(val);
          this.selectedLanguage = val;
          // location.reload();
        }
      },
    moveErrorImg: function(event) {
      event.currentTarget.src =
        window.SITE_CONFIG.cdnUrl + "/static/img/photo.png";
    },
    /* // 点击换主题
      showThemeSetting () {
        let themeDom = document.getElementById('site-theme')
        themeDom.style.width = '0px'
      }, */
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },
    // 退出
    logoutHandle() {
      var accesstoken = Vue.cookie.get("access-token");
      this.$confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            // url: this.$http.adornUrl('/auth/authentication/removeToken'),
            url: "/auth/authentication/removeToken",
            method: "post",
            // data: this.$http.adornData({'accessToken': Vue.cookie.get('access-token')})
            params: { accesstoken }
          }).then(
            ({ data }) => {
              // if (data && data.code === 0) {
              //   clearLoginInfo()
              //   this.$router.push({ name: 'login' })
              // }
              clearLoginInfo();
              this.$router.push({ name: "login" });
            },
            error => {
              this.$message.error("退出失败，请稍后重试");
            }
          );
          // logout(Vue.cookie.get('access-token'))
          // console.log(Vue.cookie.get('access-token'))
          // clearLoginInfo()
          // this.$router.push({ name: 'login' })
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.site-navbar__menu,
.site-navbar__body,
.el-menu--horizontal > .el-menu-item {
  height: 50px;
  line-height: 50px;
}
.site-navbar__body {
  .site-navbar__menu {
    background: rgba(0, 0, 0, 0);
  }
}
/* 去掉菜单底部小横条 */
.el-menu--horizontal {
  border-bottom: none;
}
</style>
<style>
#J_navbar_body > div > ul {
  background: rgba(0, 0, 0, 0);
  border-bottom: none;
}
#J_navbar_body .el-menu.el-menu--horizontal {
  border-bottom: none;
}
#J_navbar_body
  > ul.site-navbar__menu.site-navbar__menu--right.el-menu--horizontal.el-menu
  > li.el-submenu
  > div:hover,
#J_navbar_body
  > ul.site-navbar__menu.site-navbar__menu--right.el-menu--horizontal.el-menu
  > li.el-submenu
  > div:focus {
  background: rgba(0, 0, 0, 0);
}
/* 国际化激活变黑问题 */
#J_navbar.site-navbar--inverse .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  color: #fff;
  border-bottom: none;
}
#J_navbar.site-navbar--default .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
   border-bottom: none;
}
</style>
